

export const datas = [
    { title: 'new Vue()', context: 'var vm = new Vue({}) 表示创建一个VUE的实例对象，<p  style="color:red" >注意这里创建的对象是空的 </p>' },
    { title: 'init() events Lifecycle', context: '刚刚创建了一个空的VUE对象，此时这个对象上只有一些默认的生命周期函数和一些默认的事件 <p style="color:red" >注意：在这个阶段，data 和 methods 都没有创建 </p>' },
    { title: 'beforeCreate', context: '在实例初始化之后，数据观测 (data observer) 和 (event/watcher) 事件配置之前被调用。' },
    { title: 'init() injection reactivity', context: '这里开始创建data 和  methods <br> injection：注入 | reactivity：反应性的 data <p style="color:red" > data 是反应性的，其又可以根据methods中的方法变化 </p>' },
    {
        title: 'created',
        context: '在实例创建完成后被立即调用,'
            + '<p>在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算 watch/event 事件回调。</p>'
            + '然而，挂载阶段还没开始，$el property 目前尚不可用'
            + '<p style="color:red">也就是说，这时data 和 methods已经初始化好了，这里是最早可以调用他们的地方。 </p>'
            + '<p style="color:red">但是由于还没有执行挂载，所以页面是不可用的，这里只能在内存中对数据做预先的处理 </p>'
    },
    { title: 'Has <strong style="color:magenta">el</strong> option', context: 'VUE 判断 el 是否有效，如果无效，等待 <font class="codeStyle">vm.$mount()</font> 手动挂载 ( VUE绑定模板的两种方式 )' },
    {
        title: 'Has <strong style="color:magenta">template</strong> option',
        context: 'VUE 判断是否有template属性，如果有则将template编译到render()方法，'
            + '如果没有，则将 el 指定的 HTML 当成 template 进行编译'
    },
    {
        title: ' <strong style="color:magenta">template || el </strong>  ',
        context: '注意：这里表示VUE开始编译模板，执行VUE中的指令，最终在 <font style="color:red">内存</font> 中生成一个编译好的字符串，'
            + '并且把这个字符串渲染成<font style="color:red">内存</font>中的 DOM 对象，<br> 此时只是在<font style="color:red">内存</font>中编译好了模板，<font style="color:red">并没有真正的挂在到页面中</font>'
    },
    {
        title: 'beforeMount',
        context: '此函数执行的时候，模板已经在内存中编译好了，只是还没有挂载到页面中，页面中的数据为初始化的数据或旧数据'
    },
    {
        title: 'Create vm.$el an replace el width it ',
        context: '创建VUE的 el，将内存中编译好的模板替换到浏览器中（el 指定的 DOM）'
    },
    {
        title: 'mounted ',
        context: '实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了，所以操作 DOM 元素，最早可以在这里操作，'
            + '<p>只要 monuted 执行完了，就代表整个 VUE 实例已经初始化完毕了，这时组件已经脱离了创建阶段进入运行阶段</p>'
            + '<p style="color:red" >注意：mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 <font class="codeStyle"> vm.$nextTick </font> </p>'
    },
    {
        title: 'beforeUpdate ',
        context: '数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM'
            + '<p style="color:red">此时页面数据还是旧的，但是 data 中的数据是新的，只是页面尚未和新数据同步</p>'
    },
    {
        title: 'Virtual DOM re-render and patch ',
        context: '重新渲染和修补虚拟DOM , 即内存中的 DOM'
    },
    {
        title: 'updata',
        context: '由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子，他会真正的修改页面中的DOM，'
            + '<p style="color:red" > 注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick </p>'
    },
    {
        title: 'beforeDestroy',
        context: '在页面销毁之前执行的方法，这里可以做一些收尾工作，在这个位置 VUE 实例仍然可用'
    },
    {
        title: 'destroyed',
        context: '实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁'
    },


]